<template>
  <el-container class="fixed_cont" style="background-color: #fff">
    <el-header class="z_head w_container" height="80px" fixed>
      <div class="lt">
        <router-link to="/">
          <div class="logo_box">
            <img class="logo" src="@/assets/image/nlx.png" />
          </div>
        </router-link>
      </div>
      <div class="rt">
        <span v-if="type === 'register'">
          <span class="red">已有账号？</span>
          <router-link to="/user/login" class="lk_btn">登录</router-link>
        </span>
      </div>
    </el-header>
  </el-container>
</template>
<script>

export default {
  data () {
    return {
      type: 'login'
    };
  },
  methods: {

  },
  watch: {
    "$route.path": {
      handler (n) {
        n.indexOf('login') > -1 ? this.type = 'login' : this.type = 'register';
      },
      immediate: true
    }
  },
};
</script>
<style lang="scss" scoped>
.fixed_cont {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  border-bottom: 1px solid #e3e4ea;
}
.z_head {
  .lt {
    float: left;
    .logo_box {
      height: $z_header_height;
      padding: 20px;
      .logo {
        height: 35px;
      }
    }
  }

  .rt {
    float: right;
    height: $z_header_height;
    line-height: $z_header_height;
    position: relative;
    .lk_btn {
      margin-top: 29px;
      font-size: 14px;
      color: $primary_clr;
      margin: 5px;
      cursor: pointer;
      user-select: none;
      &:hover {
        color: #333;
      }
    }
    .red {
      font-size: 14px;
      color: #fb363f;
      user-select: none;
    }
  }
}
</style>
